<template>
    <div class="h5-wrapper">
        <div class="content">
            <!-- 指定二级路由出口 -->
            <!-- 
              keep-alive 缓存组件 有三个属性
              1. include => 缓存哪些组件 ==> 用的多
              2. exclude => 不缓存哪些组件
              3. max : 最多缓存几个组件
              比如 max = 3 , 最多缓存三个组件，当我们缓存了三个，再点切换，又添加了一个缓存，
              之前，最近最少使用的哪个组件，不会被缓存  LRU算法

              两个生命周期钩子函数
              actived(){}
              deactived(){}
             -->
            <keep-alive :include="keepArr">
                <router-view></router-view>
            </keep-alive>
        </div>
        <nav class="tabbar">
            <router-link to="/article">面经</router-link>
            <router-link to="/collect">收藏</router-link>
            <router-link to="/like">喜欢</router-link>
            <router-link to="/user">我的</router-link>
        </nav>
    </div>
</template>

<script>
export default {
    name: 'LayoutPage',
    data() {
        return {
            keepArr: ['ArticlePage', 'CollectPage']
        }
    }
}
</script>

<style>
body {
    margin: 0;
    padding: 0;
}
</style>
<style lang="less" scoped>
.h5-wrapper {
    .content {
        margin-bottom: 51px;
    }
    .tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: flex;
        background: #fff;
        border-top: 1px solid #e4e4e4;
        a {
            flex: 1;
            text-decoration: none;
            font-size: 14px;
            color: #333;
            -webkit-tap-highlight-color: transparent;
            &.router-link-active {
                color: #fa0;
            }
        }
    }
}
</style>
